<template>
  <div >
    <dv-full-screen-container class="box">
      <dv-border-box-11 title="EverFlow综合数据">
        <el-row >
          <el-col :span="6" >
            <el-card style="margin-top: 60px;margin-left: 20px;background-color: rgba(255,255,255,0.13);color: white;border-color: rgba(0,0,0,0);height: 100vh">
              <div style="margin-left: 10px;margin-bottom: 10px">【用户数据信息】</div>
              <dv-capsule-chart :config="config" style="width:300px;height:200px" />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="margin-top: 60px;margin-left: 10px;background-color: rgba(255,255,255,0.13);color: white;border-color: rgba(0,0,0,0);height: 100vh">

            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card style="margin-top: 60px;margin-right: 20px;margin-left: 10px;background-color: rgba(255,255,255,0.13);color: white;border-color: rgba(0,0,0,0);height: 100vh">

            </el-card>
          </el-col>
        </el-row>
      </dv-border-box-11>
    </dv-full-screen-container>

  </div>
</template>

<script>
import * as echarts from 'echarts';
const chinaJson = require("../../api/china.json")
export default {
  name: 'map',
  data(){
    return{
      // 各省的人口数据
      mapData: [
        { name: "河北", value: 10000 },
        { name: "山西", value: 200 },
        { name: "辽宁", value: 4000 },
        { name: "吉林", value: 5000 },
        { name: "黑龙江", value: 6000 },
        { name: "江苏", value: 2000 },
        { name: "浙江", value: 800 },
        { name: "安徽", value: 2000 },
        { name: "福建", value: 4600 },
        { name: "江西", value: 3200 },
        { name: "山东", value: 200 },
        { name: "河南", value: 200 },
        { name: "湖北", value: 2060 },
        { name: "湖南", value: 3000 },
        { name: "广东", value: 2900 },
        { name: "海南", value: 2000 },
        { name: "四川", value: 2120 },
        { name: "贵州", value: 20 },
        { name: "云南", value: 2000 },
        { name: "陕西", value: 2890 },
        { name: "甘肃", value: 2740 },
        { name: "青海", value: 2660 },
        { name: "台湾", value: 2440 },
        { name: "内蒙古", value: 2350 },
        { name: "广西", value: 2700 },
        { name: "西藏", value: 2000 },
        { name: "宁夏", value: 2000 },
        { name: "新疆", value: 2000 },
        { name: "北京", value: 2000 },
        { name: "天津", value: 2000 },
        { name: "上海", value: 2000 },
        { name: "重庆", value: 2000 },
        { name: "香港", value: 2000 },
        { name: "澳门", value: 2000 },
        { name: "南海诸岛", value: 800 },
      ],
      config: {//组件的配置数据
        data: [
          {
            name: '常青',
            value: 160
          },
          {
            name: 'admin',
            value: 123
          },
          {
            name: '123',
            value: 98
          },

        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
        showValue: true
      },

    }
  },
  mounted() {

    setTimeout(() => {
      console.log(this.$refs.chart)
      // 初始化 ECharts 实例
      this.chart = echarts.init(this.$refs.chart);
      // 绘制地图

      this.chart.setOption({
        series: [{
          type: 'map',
          map: 'china',
          geo: {
            map: 'china',
            roam: true,
            zoom: 1,
            center: [105, 38], // 设置地图中心位置
            label: {
              show: false
            },
            itemStyle: {
              areaColor: '#f5f5f5',
              borderColor: '#fff'
            },
            left: 'center',
            top: 50,
            bottom: 50,
            right: 50
          },
          itemStyle: {
            areaColor: '#001d57',
            borderColor: '#0037fe'
          }
        }]
      });
    }, 0.1);
  },
  created() {
    // 注册中国地图
    echarts.registerMap('china', chinaJson);
    this.chart = null;
  },
  methods:{


  }
}
</script>
<style scoped>
/* 根据具体的情况对图表进整体的布局以及css的修改 */

.box {
  background-image: url(../../../static/bg-tope178d34e.png);   background-attachment: fixed;background-color: black; background-size: cover; background-position: center center; background-repeat: no-repeat;

}
.box1{
  margin-left:20px;
  padding-top:40px;
}

</style>
